import { useResizeObserver } from '@vueuse/core';
const useContainerBeyond = (
  containerRef: Ref<ComponentPublicInstance | Element | null>,
  insideContainerRef?: Ref<ComponentPublicInstance | Element | null>
) => {
  const isXBeyond = ref(false);
  const isYBeyond = ref(false);

  watch(
    [containerRef, insideContainerRef],
    ([cv, icv]) => {
      let containerEl = null;
      // 如果没有子容器侦听父容器content宽高变化
      if (!!cv) {
        containerEl = cv.$el ? (icv.$el.nodeType === 1 ? icv.$el : icv.$el.nextElementSibling) : cv;
        useResizeObserver(containerEl! as HTMLElement, (entries) => {
          const entry = entries[entries.length - 1];
          const target = entry.target;
          isXBeyond.value = target.scrollWidth > (target as HTMLElement).clientWidth;
          isYBeyond.value = target.scrollHeight > (target as HTMLElement).clientHeight;
        });
      }

      // 如果有子容器侦听子容器content宽高变化
      if (!!icv && !!containerEl) {
        const insideContainerEl = icv.$el ? (icv.$el.nodeType === 1 ? icv.$el : icv.$el.nextElementSibling) : icv;
        useResizeObserver(insideContainerEl! as HTMLElement, (entries) => {
          const entry = entries[0];
          const target = entry.target;
          isXBeyond.value = target.scrollWidth > containerEl.clientWidth;
          isYBeyond.value = target.scrollHeight > containerEl.clientHeight;
        });
      }
    },
    { immediate: true, flush: 'post' }
  );

  return {
    isXBeyond,
    isYBeyond,
  };
};

export default useContainerBeyond;
